<template>
  <div class="b-1 b-dashed b-gray rd-4 p-x-8 p-y-4 box-border mb-8">
    <p>{{ label }}</p>
    <template v-for="col in column">
      <form-item
        :key="col.prop"
        v-bind="col"
        v-model="data[col.prop]"
      ></form-item>
      <template v-if="col.extColumn && col.extColumn[data[col.prop]]">
        <template v-for="ic in col.extColumn[data[col.prop]]">
          <form-item
            :key="col.prop + ic.prop"
            v-if="/^el-/.test(ic.name || 'el-input')"
            v-bind="ic"
            v-model="data[ic.prop]"
          ></form-item>
          <component
            :key="col.prop + ic.prop"
            v-else
            :is="ic.name"
            v-model="data[ic.prop]"
            :label="ic.label"
            :prop="ic.prop"
            v-bind="ic.attr || {}"
            size="mini"
            @change="() => handleChange(ic, d)"
          ></component>
        </template>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  props: ["prop", "label", "column", "value", "extColumn"],
  data: () => ({
    data: {},
  }),
  created() {
    const t = this.value || {};
    this.data = { ...t };
  },
  watch: {
    // data(v){
    //   this.$emit('input',v)
    // }
    value(v) {
      if (v !== this.data) {
        const t = this.value || {};
        this.data = { ...t };
      }
    },
    data: {
      handler(v) {
        this.$emit("input", v);
      },
      deep: true,
    },
  },
};
</script>
